<!--
 * @Author: your name
 * @Date: 2020-07-29 15:23:02
 * @LastEditTime: 2020-08-27 10:06:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ryfront\src\modules\roles\Index.vue
--> 
<template>
    <div style="height:100%;">
        <div style="height: 90%;padding:20px 20px; border: 1px solid #00003121;box-shadow: 2px 4px 6px #000;" class="div-box">
            <el-row stlye="height:100px;">
                <el-col :span="2" style="text-align:center;line-height:32px;" >
                    角色名称
                </el-col>
                <el-col :span="3"  >
                    <el-input size="small" v-model="roleName" ></el-input>
                </el-col>

                <el-col :span="2" style="text-align:center;line-height:32px;" >
                    角色编码
                </el-col>
                <el-col :span="3"  >
                    <el-input size="small" v-model="roleCode" ></el-input>
                </el-col>

                <el-col :span="2" style="text-align:center;line-height:32px;" >
                    角色状态
                </el-col>
                <el-col :span="3"  >
                    <el-select v-model="roleStatus" size="small">
                        <el-option value="1" label="启用" key="1"></el-option>
                        <el-option label="停用" value="0" key="0"></el-option>
                    </el-select>
                </el-col>

            </el-row>
            <el-row style="margin:20px 20px;" >
                <el-col :span="20" style="align-content: center;">
                    <el-button size="small" icon="el-icon-search" @click="search" type="primary">查询</el-button>
                    <el-button size="small" icon="el-icon-refresh" @click="reset" >重置</el-button>
                </el-col>
            </el-row>
            <!-- 分割线 -->
            <el-divider></el-divider>
            <!-- 表格操作按钮 -->
            <el-row>
                <el-col :span="24" style="margin-bottom:20px;">
                    <el-button type="primary" size="small" @click="addDialog" icon="el-icon-plus">新增</el-button>
                    <el-button type="warning" size="small" icon="el-icon-edit">修改</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table :data="roleList" border style="width: 100%" >
                        <el-table-column label="角色名称" prop="roleName"></el-table-column>
                        <el-table-column label="角色编码" prop="roleCode"></el-table-column>
                        <el-table-column label="状态" >
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.status==1" type="success">可用</el-tag>
                                <el-tag v-else type="danger">停用</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="createTime"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="updRole(scope)" >修改</el-button>
                                <el-button type="text" @click="delRole(scope)">删除</el-button>
                                <el-button type="text" @click="updUser(scope)" >管理用户</el-button>
                                <el-button type="text" @click="updRes(scope)" >管理资源</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>    
            </el-row>
        </div>

        <!-- 操作弹出框 -->
        <el-dialog title="对话框" :visible.sync="showDialog" width="20%;" >
            <Add v-if="showAddDialog" @closeDialog="closeDialog"></Add>
            <Upd v-else :roleDetail="roleDetail"  @closeDialog="closeDialog" ></Upd>
        </el-dialog>

        <!-- 角色关联用户 -->
        <el-dialog title="角色关联用户"   :visible.sync="showUser"  width="50%" >
            <User :roleId="roleId" @closeDialog="closeDialog2" ></User>
        </el-dialog>
        <!-- 角色关联资源 -->
        <el-dialog title="角色关联资源"  :visible.sync="showRes"  width="50%" >
            <Res :roleId="roleId" @closeDialog="closeDialog2" ></Res>
        </el-dialog>
        

    </div>
</template>

<script>
import {roleList,roleDel} from '@/api/index';


import Add from './Add';
import Upd from './Update';
import User from './User';
import Res from './Res';


export default {
    name:'rolesList',
    components:{Add,Upd,User,Res},
    data(){
        return {
            roleName: '',
            roleCode:'',
            roleStatus:'',
            roleList:[],
            pageIndex: 1,
            pageSize: 10,
            total:0,
            showDialog: false,
            showAddDialog: true,
            showUser: false,
            showRes: false,
            roleDetail:{},
            roleId:'',//关联的角色ID
        }
    },
    methods: {
        //条件搜索
        search(){
            let params = {
                pageIndex: this.pageIndex = 1,
                pageSize: this.pageSize,
                roleName: this.roleName,
                roleCode: this.roleCode,
                status: this.roleStatus
            };
            this.showRoleList(params);
        },
        //重置查询条件
        reset(){
            this.roleName = "";
            this.roleCode = "";
            this.roleStatus = "";
        },
        showRoleList(params){
            roleList(params).then((result) => {
                console.log(result);
                if(result.status == 200){
                    let data = result.data.data;
                    this.roleList = data.records;
                    this.pageIndex = data.current;
                    this.pageSize = data.size;
                    this.total = data.total;
                }    
            });
        },
        addDialog(){
            this.showAddDialog = true
            this.showDialog = true;
        },
        closeDialog(value){
            this.showDialog = false;
        },
        updRole(scope){
            this.showAddDialog = false;
            this.showDialog = true;
            console.log(this.roleDetail);
            console.log(scope.row);
            this.roleDetail = scope.row;    
            
        },
        delRole(scoped){
            this.$confirm("是否确认删除!",{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'danger'
            }).then(() => {
                roleDel(scoped.row.roleId).then((result) => {
                    if(result.status == 200){
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });  
                    }
                })
            }).catch((err) => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });    
            });
        },
        updUser(scope){
            this.roleId = scope.row.roleId;
            this.showUser = true;
            //主要是展示关联的用户
            
        },
        updRes(scope){
            this.roleId = scope.row.roleId;
            this.showRes = true;
        },
        closeDialog2(type){
            if(type=="user"){
                this.showUser = false;
            }else if(type=="res"){
                this.showRes = false;
            }else {
                this.$message({
                    type:"error",
                    message:'无法关闭弹出框'
                })
            }
        }
    },
    mounted() {
        let params = {
            pageIndex: 1,
            pageSize: 10,
        }
        this.showRoleList(params);
    },
}
</script>

<style scoped>
    .div-box{
        box-shadow: 2px 4px 6px #000;
    }
</style>